<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">

            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">手机号码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="phone" name="phone" autocomplete="off"
                                        class="layui-input" lay-verify="phone">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label id="form_submit" type="submit" lay-submit lay-filter="data-search-btn"
                                    class="layui-btn">点击搜索</label>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>

            <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button id="table_tip" class="layui-btn layui-btn-sm layui-btn-primary" >右侧可自定义筛选列</button>
            </div>
            </script>
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="currentTableBar1">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="no_relate">解绑</a>
            </script>
            <script type="text/html" id="currentTableBar2">
                <a class="layui-btn layui-btn-xs data-count-edit" lay-event="relate">绑定</a>
            </script>
        </div>
    </div>
    <script>
        urlfront = url_basic
        var this_privilege = -1
        var mrId=0
        var tabledata

        function setDataManage(origin_mrId, privilege){
            mrId=origin_mrId
            this_privilege=privilege
            layui.table.render({
                elem: '#currentTableId',
                autoSort: true,
                method: 'post',
                url: `${url_basic}/medicalRecords/alreadyRelatedUserList`,
                where:{  //传档案id
				"mrId":mrId
                },
                // url: '/api/user/search',
                contentType: 'application/json',
                toolbar: '#toolbarDemo',
                skin: 'line',
                even: true,
                size: 'lg',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[               
                    { field: 'userId', minWidth: 100, title: '用户Id', sort: true },  
                    { field: 'name', minWidth: 100, title: '昵称', sort: true },
                    { field: 'phone', minWidth: 100, title: '手机号', sort: true },
                    { fixed: 'right', title:'操作',align:'center', toolbar: '#currentTableBar1'}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
        }

        layui.use(['form', 'table', 'laydate'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            form.verify({
                phone: [
                    /^(\d{11})?$/
                    , '请输入正确的11位手机号'
                ]
                , 
            });
        
            table.on('sort(currentTableFilter)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

                //尽管我们的 table 自带排序功能，但并没有请求服务端。
                //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                table.reload('currentTableId', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        sort_field: obj.field, //排序字段
                        sort_order: obj.type //排序方式
                    }
                });
                // layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
            });

        
            /**
             * toolbar监听事件
             */
            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;//获取选中数据
                var event = obj.event;//获取选中数据
                if (obj.event === 'no_relate') {  // 监听解绑操作
                     $.ajax({
                        url: `${url_basic}/medicalRecords/unbundToUser`,
                        type: "POST",
                        data: JSON.stringify({
                            "userId":data.userId
                        }),
                        contentType: 'application/json',
                        success: function (data, textStatus) {
                            if (data.code == 0) {
                                layer.msg('解绑成功', { time: 0.5 * 1000 }, function () { });
                            }
                            else {
                                layer.msg('解绑失败，原因：' + data.msg);
                            }
                        },
                        error: function (xhr, errorText, errorType) {
                            layer.msg('解绑失败（与服务器连接失败）');
                        },
                        complete: function () {
                            table.reload('currentTableId'); //只重载数据
                        },
                        dataType: "json"
                    })
                }
                else if (obj.event === 'relate') {  // 监听绑定操作
                    $.ajax({
                        url: `${url_basic}/medicalRecords/relateToUser`,
                        type: "POST",
                        data: JSON.stringify({
                            "userId":data.id,
                            "mrId":mrId
                        }),
                        contentType: 'application/json',
                        success: function (data, textStatus) {
                            if (data.code == 0) {
                                layer.msg('绑定成功', { time: 0.5 * 1000 }, function () { });
                            }
                            else {
                                layer.msg('绑定失败，原因：' + data.msg);
                            }
                        },
                        error: function (xhr, errorText, errorType) {
                            layer.msg('绑定失败（与服务器连接失败）');
                        },
                        complete: function () {
                            table.reload('currentTableId'); //只重载数据
                        },
                        dataType: "json"
                    })
                }
            });



            // 监听搜索操作
            like_search_param = ["phone"]
            form.on('submit(data-search-btn)', function (data) {
                var phone=data.field['phone']
                //执行搜索重载
                table.reload('currentTableId', 
                    { 
                        url: `${url_basic}/user/searchUserToRelate`,
                        where: {
                            'phone':phone
                        },
                        cols: [[               
                            { field: 'id', minWidth: 100, title: '用户Id', sort: true },  
                            { field: 'name', minWidth: 100, title: '昵称', sort: true },
                            { field: 'phone', minWidth: 100, title: '手机号', sort: true },
                            { fixed: 'right', title:'操作',align:'center', toolbar: '#currentTableBar2'}
                        ]],
                    });
            });


        });
    </script>

</body>

</html>